<template>
    <div class="data">
      <!-- 头部 -->
			<div class="dataHeader">
				<div class="audit_search">
					<div class="block">
            <el-input v-model="s_loginname" placeholder="请输入登录账号"></el-input>
          </div>
					<div class="block">
            <el-input v-model="s_realname" placeholder="请输入真实姓名"></el-input>
          </div>
					<div class="block">
            <el-button class="seachBtn_index" @click="queryTow(s_loginname,s_realname)" type="primary">搜索</el-button>
					</div>
          <el-button class="addBtn_index" @click="addOption" type="primary">添加</el-button>
				</div>
			</div>
       <div class="detailsMask" v-if="isShow"></div>
      <div class="detailsBox" v-if="isShow">
        <p style="height:50px; font-size:16px"> 登录账号:<el-input v-model="loginname" style="width:70%;float:right;margin-right:80px;margin-top:-5px;" placeholder="请输入内容" ></el-input></p>
        <p style="height:50px; font-size:16px"> 真实姓名:<el-input v-model="realname" style="width:70%;float:right;margin-right:80px;margin-top:-5px;" placeholder="请输入内容" ></el-input></p>
        <p style="height:50px; font-size:16px"> 登录密码:<el-input v-model="pwd" style="width:70%;float:right;margin-right:80px;margin-top:-5px;" placeholder="请输入登录密码" ></el-input></p>
        <p style="text-align:center">
          <el-button @click="cancelSave" size="small" type="primary" >取消</el-button>
          <el-button @click="saveDetails" size="small" type="primary">添加</el-button>
        </p>
      </div> 
      <!-- 内容 -->
      <div class="dataContent">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="loginname"
              label="登录账号"
              width="">
            </el-table-column>
            <el-table-column
              prop="realname"
              label="真实姓名"
              width="">
            </el-table-column>
            <el-table-column
              prop="status"
              width="200"
              label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0" >无效</span>
                  <span v-if="scope.row.status == 1" >有效</span>
                </template>
            </el-table-column>
             <el-table-column
              prop=" "
              label="操作"
              width="200">
               <template slot-scope="scope">
                  <el-button  type="primary" size="small" @click="resetPwd(scope.row.id)">重置密码</el-button>
                </template>
            </el-table-column>
          </el-table>
        </template>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination 
        @current-change="handleCurrentChange" 
        :current-page.sync="currentPage" 
        :page-size="10" 
        layout="total, prev, pager, next" :total="this.total">
        </el-pagination>
      </div>

    </div>
</template>

<script>
import http_url from "@/http/http";
export default {
  data() {
    return {
      isShow: false,
      tableData: [],
      pageSize: 10, //默认每页数据量
      page: 1, //分页开始页
      loginname: "",
      realname: "",
      pwd: "",
      total: 0, //默认数据总数
      currentPage: 1,
      s_loginname: "",
      s_realname: ""
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      // /opter/pagelist.do  操作员列表
      this.$http({
        method: "POST",
        url: http_url.BASE_URL + "/opter/pagelist.do",
        data: `page=${this.page}&rows=${this.pageSize}&loginname=${
          this.s_loginname
        }&realname=${this.s_realname}`
      })
        .then(res => {
          if (res.data.code == 0) {
            this.tableData = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            this.$message({
              type: "warning",
              message: res.data.message
            });
          }
        })
        .catch(error => {
          this.$message({
            type: "warning",
            message: "网络错误，请稍后再试！"
          });
        });
    },
    resetPwd(id) {
      this.$http({
        method: "POST",
        url: http_url.BASE_URL + "/opter/resetPwd.do",
        data: `id=${id}&pwd=123456`
      })
        .then(res => {
          if (res.data.code == 0) {
            this.$message({
              type: "success",
              message: res.data.message
            });
          } else {
            this.$message({
              type: "warning",
              message: res.data.message
            });
          }
        })
        .catch(error => {
          this.$message({
            type: "warning",
            message: "网络错误,请稍后再试！"
          });
        });
    },
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.initData();
    },
    queryTow(loginname, realname) {
      this.s_loginname = loginname;
      this.s_realname = realname;
      this.initData();
    },
    addOption() {
      this.isShow = true;
      (this.loginname = ""), (this.realname = ""), (this.pwd = "");
    },
    cancelSave() {
      this.isShow = false;
    },
    saveDetails() {
      if (this.loginname == "" || this.realname == "" || this.pwd == "") {
        this.$message({
          type: "warning",
          message: "你的消息填写有误！"
        });
        return;
      }
      this.isShow = false;
      // 添加操作员
      this.$http({
        method: "POST",
        url: http_url.BASE_URL + "/opter/add.do ",
        data: `loginname=${this.loginname}&realname=${this.realname}&pwd=${
          this.pwd
        }&fkRid=1`
      })
        .then(res => {
          if (res.data.code == 0) {
            this.initData();
            this.$message({
              type: "success",
              message: res.data.message
            });
          } else {
            this.$message({
              type: "warning",
              message: res.data.message
            });
          }
        })
        .catch(error => {
          this.$message({
            type: "warning",
            message: "网络错误，请稍后再试！"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.data {
  width: 100%;
  height: calc(100% - 50px);
  padding: 10px;
  .detailsMask {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.7;
    z-index: 990;
    position: fixed;
    top: 0;
    left: 0;
  }
  .detailsBox {
    width: 600px;
    // height: 500px;
    padding: 30px;
    margin: 0 auto;
    background: #fff;
    position: absolute;
    left: calc(50% - 300px);
    top: calc(50% - 200px);
    z-index: 999;
  }
  .dataHeader {
    height: 40px;
    width: 100%;
    margin-top: 5px;
    position: relative;
    margin-bottom: 20px;
    .audit_search {
      // background: darkcyan;
      width: 710px;
      height: 100%;
      .seachBtn_index {
        position: absolute;
        left: 400px;
        display: block;
        width: 60px;
        height: 36px;
      }
    }
    .audit_search .block {
      width: 190px;
      display: inline-block;
    }
    .block input {
      width: 100%;
    }
    // input {
    //   width: 270px;
    // }
    button {
      position: absolute;
      right: 100px;
      top: 0;
    }
    .addBtn_index {
      position: absolute;
      right: 200px;
    }
  }
  .dataContent {
    height: calc(100% - 150px);
    overflow-y: scroll;
    th,
    td {
      text-align: center;
    }
    td {
      font-size: 14px;
    }
  }
  .pagination {
    position: absolute;
    bottom: 50px;
    left: calc(50% - 145px);
    text-align: center;
  }
}
</style>
